<template>
	<view class="toast" v-if="visbole">
		<view class="toast-form">
			<view class="text">
				<text>{{ text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
let toastTimeout = 0;
export default {
	data() {
		return {
			visbole: false,
			text: '',
			// content: '',
			fail: function() {},
			success: function() {},
			complete: function() {}
		};
	},
	methods: {
		show: function(param = {}) {
			this.visbole = true;
			this.text = param.text ?? '';
			// this.content = param.content ?? '';
			let timeout = param.timeout ?? 1500;
			this.fail = param.fail ?? function() {};
			this.success = param.success ?? function() {};
			this.complete = param.complete ?? function() {};

			clearTimeout(toastTimeout);
			toastTimeout = setTimeout(() => {
				this.hide();
				this.success();
			}, timeout);
		},
		hide: function(param = {}) {
			this.visbole = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.toast {
	bottom: 0;
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
	z-index: 500;
	.toast-form {
		position: absolute;
		width: 680rpx;
		padding: 0 35rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 15vh;
		animation: show_toast 0.1s linear;
		.text {
			white-space: nowrap;
			text-align: center;
			line-height: 90rpx;
			padding: 0 50rpx;
			background: rgba(0, 0, 0, 0.6);
			color: #fff;
			border-radius: 45rpx;
			overflow: hidden;
			font-size: 26rpx;
		}
	}
}
@keyframes show_toast {
	from {
		bottom: 0;
	}
	to {
		bottom: 15vh;
	}
}
</style>
